<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>2.Key的作用</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /* 此处一定要写babel */
        /**********
         * 慢动作回放 =========使用index索引值作为key
         * 初始数据:
         *  {id:1,name: '小张',age: '18'}
         *  {id:2,name: '小李',age: '19'}
         * 初始的虚拟DOM
         * <li key=0>小张---18<input type="text"/></li> 
         * <li key=1>小李---19<input type="text"/></li>
         * 更新后的数据
         * {id:3,name:"小王",age:"22"}
         * {id:2,name:"小张",age:"18"}
         * {id:1,name:"小李",age:"19"}
         * 更新后虚拟DOM
         *  <li key=0>小王---22 <input type="text"/></li> 
         *  <li key=1>小张---18 <input type="text"/></li> 
         *  <li key=2>小李---19 <input type="text"/></li> 
         * ------------------------------------------------------------------
         * * 慢动作回放 =========使用id唯一标识作为key
         * 初始数据:
         *  {id:1,name: '小张',age: '18'}
         *  {id:2,name: '小李',age: '19'}
         * 初始的虚拟DOM
         * <li key=1>小张---18<input type="text"/></li>
         * <li key=2>小李---19<input type="text"/></li>
         * 更新后的数据
         * {id:3,name:"小王",age:"22"}
         * {id:1,name:"小张",age:"18"}
         * {id:2,name:"小李",age:"19"}
         * 更新后虚拟DOM
         *  <li key=3>小王---22<input type="text"/></li> 
         *  <li key=1>小张---18<input type="text"/></li>
         *  <li key=2>小李---19<input type="text"/></li>
         * ******************************************************************/ 
			//1.创建组件
			class Person extends React.Component {
				state = {
					persons: [
						{
							id: 1,
							name: '小张',
							age: '18',
						},
						{
							id: 2,
							name: '小李',
							age: '19',
						},
					],
				}
                add=()=>{
                    //获取初始状态
                    const {persons} = this.state;
                    const p = { name:"小王",age:"22",id:persons.length + 1}
                    //更新状态
                    this.setState({
                        persons:[p,...persons]
                    })
                }
				render() {
					const { persons } = this.state
					return (
						<div>
							<h2>展示人员列表</h2>
                            <h3>使用index索引值作为key</h3>
							<button onClick={this.add}>添加一个小王</button>
							<ul>
								{persons.map((item, index) => {
									return (
										<li key={index}>
											{item.name}=={item.age}
                                            <input type="text"/>
										</li>
									)
								})}
							</ul>
                            <hr/>
                            <hr/>
                            <h3>使用id索引值作为key</h3>
							<ul>
								{persons.map((item, index) => {
									return (
										<li key={item.id}>
											{item.name}=={item.age}
                                            <input type="text"/>
										</li>
									)
								})}
							</ul>
						</div>
					)
				}
			}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(<Person />, document.getElementById('test'))
		</script>
</body>

</html>